<template>
  <div class="Header">
    <p>我是Header</p>
    <p>{{ count }}</p>
    <p>prop传递来的值{{ myNum }},{{ name }},</p>
    <button @click="count++">累加</button>
    <!-- 
      控制台会报错  不建议直接修改prop传递过来的值
     -->
    <button @click="getProp">尝试修改prop传递的值</button>
  </div>
</template>

<script>
export default {
  name: "MyHeader",
  /*
    props
  */
  // props: ["num", "name"], 简单声明接收
  //接收要加引号 不然认为是变量

  // 接收的同时对数据进行类型限制
  // props: {
  //   name: String,
  //   num: Number,
  // },

  // 接收的同时对数据进行类型限制 默认值的指定+必传限制
  props: {
    name: {
      type: String,

      required: true, //必填
      /* 
        Missing required prop: "name" 如果不填写 报错信息
      */
    },
    num: {
      type: Number,

      default: 99, //如果不传 使用默认值
    },
  },
  data() {
    return {
      count: 1,
      myNum: this.num, 
      // 可以把props接收到的prop保存在data中,因为props是优先被接受的设置至组件实例上
      
    };
  },
  methods: {
    getProp() {
      this.myNum++;
    },
  },
};
</script>

<style>
.Header {
  background-color: cornflowerblue;
}
</style>
